<template>
  <div class="wrapper">
    <BreakSpace label="投诉信息" :containerStyle="{ marginBottom: '10px' }" />
    <FormPanel
      ref="infoMain"
      :list="formList"
      :formType="type"
      @formChange="changeHandle"
      :isSubmitBtn="false"
    />
    <div>
      <BreakSpace label="车辆信息" :containerStyle="{ marginBottom: '10px' }" />
      <FormPanel
        :list="carInfo"
        :formType="type"
        :isSubmitBtn="false"
      />
<!--      <el-tinymce v-model="content" :height="300" style="padding-bottom:10px"  :disabled=true :wordsLimit="20000" />-->
    </div>
    <div>
      <BreakSpace label="处理明细" :containerStyle="{ marginBottom: '10px' }" />
      <FormPanel
        :cols="3"
        :list="form"
        :formType="type"
        :isSubmitBtn="false"
      />
    </div>
    <div>
      <BreakSpace label="操作历史" :containerStyle="{ marginBottom: '10px' }" />
      <FilterTable
        ref="table"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :isSelectColumn="false"
        :onRowSelectChange="selectChange"
        columnsRef="notification_maintain_index_02"
        :onColumnsChange="columns => this.columns = columns"
      >
      </FilterTable>
    </div>
    <div class="dialogBottmView">
      <el-button @click="closeDialog()">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { authority } from '@/utils/authMixin';
import { dictionary } from '@/utils/dictMixin';
import { getComplainHistoryLog, acceptComplaintResponse} from '@/api/customerRepair/customerComplaint/customerComplaintQuery';
import { getUser } from '@/assets/js/auth';
import moment from 'moment'

export default {
  mixins: [authority, dictionary],
  props: {
    value: {
      type: Object,
      required: true
    },
    ccResponseData: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      columns: this.creatHeader(),
      formList: this.createFormList(),
      form: this.createForm(),
      carInfo: this.carInfo(),
      fetchParams:  { ccId: this.ccResponseData.ccId},
      fetchApi: getComplainHistoryLog,
      type:this.value.type,
      dataMain:null, // 第一个表单的数据
      content:null,
      dataInfo:null,
      rowSelectData: []
    };
  },
  // 页面加载完成 请求接口
  mounted() {
    this.formList.forEach(x => {
      if(x.fieldName === 'ccDate'){
        if(this.ccResponseData[x.fieldName]===null ||this.ccResponseData[x.fieldName]===''){
            x.initialValue = ''
        }else{
          x.initialValue = moment(this.ccResponseData[x.fieldName]).format('YYYY-MM-DD HH:mm:ss');
        }
      }else if(x.fieldName === 'ccState'){
        x.initialValue = this.createDictText(this.ccResponseData[x.fieldName],'5589');
      }else if(x.fieldName === 'cusGender'){
        x.initialValue = this.createDictText(this.ccResponseData[x.fieldName],'1002');
      }else if(x.fieldName === 'ccLevel'){
        x.initialValue = this.createDictText(this.ccResponseData[x.fieldName],'5587');
      }else if(x.fieldName === 'ccType'){
        x.initialValue = this.createDictText(this.ccResponseData[x.fieldName],'5586');
      }else if(x.fieldName === 'ccChannel'){
        x.initialValue = this.createDictText(this.ccResponseData[x.fieldName],'5518');
      }else{
        x.initialValue = this.ccResponseData[x.fieldName];
      }

    });

    // this.form[0].initialValue = this

    this.carInfo.forEach(x => {
      if(x.fieldName === 'purchaseTime'){
           if(this.ccResponseData[x.fieldName]===null ||this.ccResponseData[x.fieldName]===''){
            x.initialValue = ''
        }else{
             x.initialValue = moment(this.ccResponseData[x.fieldName]).format('YYYY-MM-DD HH:mm:ss');
        }
      }else{
        x.initialValue = this.ccResponseData[x.fieldName];
      }
    });

    this.form.forEach(x => {
      if(x.fieldName === 'opAt'){
       if(this.ccResponseData[x.fieldName]===null ||this.ccResponseData[x.fieldName]===''){
            x.initialValue = ''
        }else{
             x.initialValue = moment(this.ccResponseData[x.fieldName]).format('YYYY-MM-DD HH:mm:ss');
        }
      }else{
        x.initialValue = this.ccResponseData[x.fieldName];
      }
    });
  },
  methods: {
    createFormList() {
      return [
        { type: 'INPUT', label: '投诉单号', fieldName: 'ccCode', disabled: true,placeholder: '请选择', initialValue: '' },
        { type: 'INPUT', label: '投诉日期', fieldName: 'ccDate',disabled: true, placeholder: '请选择', initialValue: '', format: 'yyyy-MM-dd HH:mm:ss'},
        { type: 'INPUT', label: '单据状态', fieldName: 'ccState',disabled: true, placeholder: '请选择', initialValue: ''},
        { type: 'INPUT', label: '投诉人姓名', fieldName: 'cusName', disabled: true,placeholder: '请选择', initialValue: '' },
        { type: 'INPUT', label: '投诉人性别', fieldName: 'cusGender', disabled: true,placeholder: '请选择', initialValue: '' },
        { type: 'INPUT', label: '投诉人手机', fieldName: 'cusMobile',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '联系电话', fieldName: 'cusTel', disabled: true,placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '投诉渠道', fieldName: 'ccChannel',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '投诉等级', fieldName: 'ccLevel',disabled: true, placeholder: '请输入', initialValue: ''},
        { type: 'INPUT', label: '投诉类型', fieldName: 'ccType', disabled: true,placeholder: '请输入', initialValue: '' },
        { type: 'TEXT_AREA', label: '投诉内容', fieldName: 'ccContent',disabled: true, placeholder: '请输入', initialValue: '',selfCols: 3, rows:2, },
      ];
    },
    carInfo(){
      return [
        { type: 'INPUT', label: '车主姓名', fieldName: 'owenrName',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '车主手机', fieldName: 'owenrMobile',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: 'VIN', fieldName: 'vin', disabled: true,placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '车系', fieldName: 'series',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '车型', fieldName: 'model', disabled: true,placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '车牌号', fieldName: 'license',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '购车时间', fieldName: 'purchaseTime',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '行驶里程', fieldName: 'mileage',disabled: true, placeholder: '请输入', initialValue: '' }
      ];
    },
    createForm(){
      return [
        { type: 'INPUT', label: '处理人', fieldName: 'opBy',disabled: true, placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '处理时间', fieldName: 'opAt',disabled: true, placeholder: '请输入', initialValue:'' },
        { type: 'INPUT', label: '处理人联系方式', fieldName: 'opTel',disabled: true, placeholder: '请输入' },

        {
          type: 'TEXT_AREA',
          label: '解决方案',
          fieldName: 'opScheme',
          placeholder: '请输入',
          initialValue: '',
          selfCols: 3,
          rows:2,
          disabled: true,
          // rules: [{ required: true, message: '必填', trigger: 'blur' }, { max: 2000, message: '长度最大3000字符', trigger: 'blur' }]
        },


        {
          type: 'TEXT_AREA',
          label: '处理结果',
          fieldName: 'opResult',
          placeholder: '请输入',
          initialValue: '',
          selfCols: 3,
          rows:2,
          disabled: true,
          // rules: [ { max: 2000, message: '长度最大3000字符', trigger: 'blur' }]
        },

        {
          type: 'TEXT_AREA',
          label: '备注信息',
          fieldName: 'opRemark',
          placeholder: '请输入',
          initialValue: '',
          selfCols: 3,
          rows:2,
          disabled: true,
          // rules: [{ required: true, message: '必填', trigger: 'blur' }, { max: 2000, message: '长度最大3000字符', trigger: 'blur' }]
        },

      ]
    },

    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
         {
          title: '处理人',
          dataIndex: 'opBy',
          editable: true,
          filterable: true,
          editType: 'input',
          editRequired: true,
          disabled: true,
          editItems: [],
          // initialValue:getuser(),
        },
        {
          title: '处理时间',
          dataIndex: 'opAt',
          dateFormat: 'yyyy-MM-dd HH:mm:ss', sorter: true,
          disabled: true
        },

        {
          title: '处理后状态',
          dataIndex: 'opState',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.opState, '5589')}</span>;
          }
        },
        {
          title: '处理内容',
          dataIndex: 'opContent',
          editable: true,
          editType: 'input',
        }
      ];
    },

    // 关闭当前页面操作
    closeDialog(type){
      this.$emit('close', { visible: false ,type:type});
    },

    selectChange(val) {
      console.log('val', val);
      this.rowSelectData = val;
    },
    changeHandle(data) {
    },
    changeHandleFile(data){

    }
  }
};
</script>
<style scoped>
.wrapper {
  height: calc(100vh - 110px);
}
</style>
